<template>
  <div class='home'>
    <van-form validate-first>
      <div class='czInfo'>
        <div>备案信息</div>
      </div>
      <van-field input-align='right'
                 label='车牌号'
                 v-model='formData.BRANUM'
                 name='pattern'
                 readonly
                 placeholder='车牌号'
      />
      <van-field input-align='right'
                 label='车牌颜色'
                 v-model='formData.BRACOLOR_text'
                 name='pattern'
                 readonly
                 placeholder='车牌颜色'
      />
      <van-field input-align='right'
                 label='停止时间'
                 v-model='formData.on_time'
                 name='pattern'
                 readonly
                 placeholder='停止时间'
      />
      <van-field input-align='right'
                 label='状态'
                 v-model='formData.tl_type'
                 name='pattern'
                 readonly
                 placeholder='状态'
      />
      <van-field input-align='right'
                 label='驾驶员姓名'
                 v-model='formData.driver_name'
                 name='pattern'
                 readonly
                 placeholder='驾驶员姓名'
      />
      <van-field input-align='right'
                 label='驾驶员身份证号'
                 v-model='formData.driver_cardno'
                 name='pattern'
                 readonly
                 placeholder='驾驶员身份证号'
      />
      <van-field input-align='right'
                 label='驾驶员联系方式'
                 v-model='formData.driver_tel'
                 name='pattern'
                 readonly
                 placeholder='驾驶员联系方式'
      />
      <div v-if='formData.carczMsg'>
        <van-field input-align='right'
                   label='处置人'
                   v-model='formData.name'
                   name='pattern'
                   readonly
                   placeholder='处置人'
        />
        <van-field input-align='right'
                   label='处置时间'
                   v-model='formData.create_time'
                   name='pattern'
                   readonly
                   placeholder='处置时间'
        />
        <van-field input-align='right'
                   label='处置类型'
                   v-model='formData.text'
                   name='pattern'
                   readonly
                   placeholder='处置类型'
        />
        <van-field input-align='right'
                   label='处置内容'
                   v-model='formData.carczMsg'
                   name='pattern'
                   readonly
                   class='textarea'
                   type='textarea'
                   placeholder='处置内容'
        />
      </div>
      <div class='bottom'>
        <van-button @click='toMap' class='button' style='background:#19be6b;border:#19be6b'
                    type='primary'>查看位置
        </van-button>
        <van-button v-if='!formData.carczMsg' class='button' @click='toPage'
                    style='background:#f90;border:#f90;margin-left: auto'
                    type='primary'>
          处置
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getLoginNameT } from '@/api/gov/car_stop'

export default {
  name: 'home',
  data () {
    return {
      formData: { name: '' },
      columns: [
        { text: '社区处置', value: '1' },
        { text: '服务驿站处置', value: '2' },
        { text: '宾馆处置', value: '3' },
        { text: '当日离沈', value: '9' },
        { text: '其他', value: '4' }
      ]
    }
  },
  mounted () {
    this.formData = JSON.parse(this.$route.query.data)
    this.formData.name = ''
    if (this.formData.carczMsg) {
      for (const retKey in this.columns) {
        if (this.columns[retKey].value === this.formData.type) {
          this.formData.text = this.columns[retKey].text
        }
      }
      getLoginNameT({ login_code: this.formData.login_code }).then(ret => {
        if (ret.data.errcode === 0) {
          console.log(ret.data.data.name)
          this.formData.name = ret.data.data.name
          console.log(this.formData)
          this.$forceUpdate()
        } else {
          this.loading = false
          this.$toast.fail(ret.data.errmsg)
        }
      })
    }
  },
  methods: {
    toMap () {
      this.$router.push({ name: 'car_stop_map', query: { data: JSON.stringify(this.formData) } })
    },
    toPage () {
      this.$router.push({ name: 'car_stop_disposal', query: { data: JSON.stringify(this.formData), go: 2 } })
    }
  }
}
</script>
<style lang='less' scoped>
.bottom {
  padding: 20px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  width: 300px;
}

.home {
  width: 100%;
  overflow-x: hidden;

  .btn {
    height: 80px;
    background: #f1f3f4;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      margin-left: 10px;
      vertical-align: middle;
    }
  }

  img {
    width: 100%;
  }

  .dialog-container {
    height: 70vh;
    overflow-y: auto;
  }

  .get-area {
    width: 100%;
    padding: 0 0.8rem;
    font-size: 0.747rem;
    color: #fff;
    background-color: #1989fa;
    border: 0.053rem solid #1989fa;
    height: 2.347rem;
    line-height: 2.347rem;
    text-align: center;
    border-radius: 0.107rem;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;
  }

  /deep/ .van-field__label {
    width: 9em;
    display: flex;
    align-items: center;
  }

  .snTime /deep/ .van-field__label {
    width: 4.2em;
  }

  .snTime /deep/ .van-radio--horizontal {
    margin-right: .3rem;
  }

  /deep/ .van-field__error-message {
    text-align: right;
  }

  .title {
    text-indent: 20px;
    padding: 50px 0 20px;
  }

  .container {
    width: 90%;
    height: 80vh;
    overflow-y: auto;
    border: 1px solid #adadad;
    margin: auto;

    .item {
      margin: 10px;
    }
  }
}

.prompt {
  display: block;
  font-size: 28px;
  color: red;
  text-align: center;
  margin-bottom: 10px;
}

.uploaderOut {
  height: 6rem;

  .bottom {
    width: 690px;
    margin: 0 auto;
    border-bottom: 1px solid #ebedf0;
  }
}

.addressOut {
  width: 690px;
  margin: 0 auto;
  height: 800px;
  overflow-y: auto;
  //overflow-x: hidden;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;

  .titleArea {
    background-color: #EEEEEE;
    font-size: 24px;
    text-align: center;
    padding: 8px;
    border-radius: 10px;
    margin: 8px;
  }

  //background-color: blue;
}

.czInfo {
  height: 80px;
  font-size: 32px;
  //font-weight: bold;
  //color: white;
  //background-color: #58be6a;
  background-color: #eee;
  display: flex;
  align-items: center;

  div {
    width: 690px;
    margin: 0 auto;
  }
}

.field {
  width: 96%;
  margin: 0 auto;
  box-sizing: border-box;

  .field_content {
    display: flex;
    height: 90px;
    align-items: center;
    // justify-content: space-between;
  }

  .line {
    width: 690px;
    margin: 0 auto;
    border-bottom: 0.053rem solid #ebedf0;
  }

  .field_required {
    font-size: 28px;
    color: #ee0a24;
  }

  .label {
    flex: 1;
    flex-shrink: 0;
    font-size: 28px;
    color: #646566;
    margin-left: 2px;
  }

  .text {
    font-size: 28px;
    color: #646566;
    display: flex;
    align-items: center;

    .icon {
      width: 15px;
      height: 15px;
      border-radius: 15px;
      background-color: #58be6a;
      flex-shrink: 0;
      margin-right: 5px;
    }

    .icon1 {
      width: 15px;
      height: 15px;
      border-radius: 15px;
      flex-shrink: 0;
      background-color: red;
      margin-right: 5px;
    }

    .value {
      color: #58be6a;
    }

    .value1 {
      color: red;
    }
  }
}

.home {
  .textarea {
    /deep/ .van-field__label {
      align-items: baseline !important;
    }
  }
}
</style>
